<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头部</title>
    <link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_759899_9yt5yeq53w9.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
    <script src="js/header.js"></script>
</head>
<body>
<div class="zc-topbars">
    <div class="zc-topbar">
        <div class="left">
            <span><a href="#">商城首页</a></span>
            <span>hi~欢迎来到Z商城,请<a href="login.html">登录</a></span>
            <span><a href="register.html">免费注册</a></span>
        </div>
        <div class="right">
            <ul>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">买家中心<i class="iconfont icon-down-trangle-copy-copy"></i></a><div class="buy"><a href="#">关注的店铺 30</a><a href="#">关注的商品 48</a></div></li>
                <li><a href="#">购物车0件</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#"><span class="iconfont icon-shouji"></span>手机商城<i class="iconfont icon-down-trangle-copy-copy"></i></a><div class="scan"></div></li>
                <li><a href="#">中关村在线</a></li>
                <li><a href="#">招商合作</a></li>
                <li><a href="#">联系客服</a><div class="phone"><span>13361615759</span></div></li>
            </ul>
        </div>
    </div>
</div>
<div class="header">
    <div class="wrapper-search">
        <div class="logo">
        <span class="logo">z</span>
        <span class="font">商城</span>
        <span class="url">www.zol.com</span>
        </div>
        <div class="search">
            <input type="text" placeholder="请输入商品" class="text"/>
            <input type="submit" value="搜索" class="search"/>
        </div>
        <div class="quick-entry">
            <ul>
                <li><a href="details.html"><span class="iconfont icon-dingdan"></span> 我的订单</a></li>
                <li><a href="#"><span class="iconfont icon-weibiaoti2fuzhi02"></span> 我的优惠券</a></li>
                <li><a href="shopping-car.html"><span class="iconfont icon-gouwuche"></span> 购物车</a><div class="num">0</div></li>
            </ul>
        </div>
    </div>
</div>
<div class="nav">
    <ul>
        <li>
            <span class="iconfont icon-fenlei" id="classify">&nbsp;&nbsp;&nbsp;全部分类</span>
            <div class="swiper-nav">
                <ul>
                    <li>
                        <span class="iconfont icon-shouji1">&nbsp;&nbsp;&nbsp;手机&nbsp;&nbsp;&nbsp;<b>></b></span>
                        <div class="phone-item">
                            <a href="#">手机</a>
                            <a href="#">移动电源</a>
                            <a href="#">蓝牙耳机</a>
                            <a href="#">手机贴膜</a>
                            <a href="#">手机保护套</a>
                            <a href="#">有线耳机</a>
                            <a href="#">手机零件</a>
                            <a href="#">数据线</a>
                            <a href="#">充电器</a>
                            <a href="#">手机维修</a>
                            <div class="phone-recommend">
                            </div>
                        </div>
                    </li>
                    <li><span class="iconfont icon-diannao">&nbsp;&nbsp;&nbsp;电脑&nbsp;&nbsp;&nbsp;<b>></b></span>
                        <!--<div class="phone-item">-->
                            <!--<a href="#">手机</a>-->
                            <!--<a href="#">移动电源</a>-->
                            <!--<a href="#">蓝牙耳机</a>-->
                            <!--<a href="#">手机贴膜</a>-->
                            <!--<a href="#">手机保护套</a>-->
                            <!--<a href="#">有线耳机</a>-->
                            <!--<a href="#">手机零件</a>-->
                            <!--<a href="#">数据线</a>-->
                            <!--<a href="#">充电器</a>-->
                            <!--<a href="#">手机维修</a>-->
                            <!--<div class="phone-recommend">-->
                            <!--</div>-->
                        <!--</div>-->
                    </li>
                    <li><span class="iconfont icon-DIY">&nbsp;&nbsp;&nbsp;DIY&nbsp;&nbsp;&nbsp;&nbsp;<b>></b></span></li>
                    <li><span class="iconfont icon-shuma">&nbsp;&nbsp;&nbsp;数码&nbsp;&nbsp;&nbsp;<b>></b></span></li>
                    <li><span class="iconfont icon-shubiao">&nbsp;&nbsp;&nbsp;外设&nbsp;&nbsp;&nbsp;<b>></b></span></li>
                    <li><span class="iconfont icon-zhinenghua">&nbsp;&nbsp;&nbsp;智能&nbsp;&nbsp;&nbsp;<b>></b></span></li>
                </ul>
            </div>
        </li>
        <li><a href="#" class="index">首页</a></li>
        <li><a href="#">团购</a></li>
        <li><a href="#">电子竞技</a></li>
        <li><a href="#">本地优选</a></li>
        <li><a href="#">家电优选</a></li>
    </ul>
</div>
</body>
</html>